<template>
	<div class="width-100-percent flex-start-center">
		<el-input
			v-if="readonly"
			v-model="valStr"
			:size="size"
			:placeholder="placeholder"
			:readonly="readonly"
			:clearable="clearable"
			:disabled="disabled"
			@change="handleSelect"
		/>
		<jk-autocomplete
			v-else
			:size="size"
			:popper-append-to-body="popperAppendToBody"
			:placeholder="placeholder"
			:readonly="readonly"
			:option-key="optionKey"
			:only-key="onlyKey"
			:clearable="clearable"
			:disabled="disabled"
			:query-name="queryName"
			:params-data="paramsData"
			:query-search-async="querySearchAsync"
			@on-select="handleSelect"
		></jk-autocomplete>
		<div
			:class="[
				'el-icon-more search-icon-bar',
				disabled ? '' : 'search-icon-bar-hover'
			]"
			:style="{background: disabled ? '#F5F7FA' : '#fff',cursor: disabled ? 'not-allowed' : '',height: comHeight(size) + 'px',lineHeight: comHeight(size) + 'px'}"
			@click="onSelectDialog"
		></div>
		<div
			v-show="showAdd"
			:class="[
				'el-icon-document-add search-icon-bar',
				disabled ? '' : 'search-icon-bar-hover'
			]"
			:style="{marginLeft: disabled ? '0px' : '', background: disabled ? '#F5F7FA' : '#fff',cursor: disabled ? 'not-allowed' : '',height: comHeight(size) + 'px',lineHeight: comHeight(size) + 'px'}"
			@click="addBtn"
		></div>
	</div>
</template>

<script>
    export default {
        name: 'JkSearchSelect',
        props: {
            val: {
                type: String,
                default: ''
            },
            optionKey: { // 下拉选项唯一值的字段名
                type: String,
                default: 'id'
            },
            onlyKey: { // 外部与optionKey关联绑定的字段名
                type: String,
                default: 'id'
            },
            queryName: { // 搜索的字段
                type: String,
                default: 'name'
            },
            paramsData: {
                type: Object,
                default() {
                    return {};
                }
            },
            querySearchAsync: {
                type: Function,
                default() {
                    return () => {};
                }
            },
            popperAppendToBody: {
                type: Boolean,
                default: true
            },
            clearable: {
                type: Boolean,
                default: false
            },
            placeholder: {
                type: String,
                default: ''
            },
            disabled: {
                type: Boolean,
                default: false
            },
            readonly: {
                type: Boolean,
                default: false
            },
            size: {
                type: String,
                default: 'medium'
            },
            showAdd: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                valStr: '',
                iconHeight: 36,
                newParamsData: {}
            };
        },
        computed: {
            comHeight() {
                return function(x) {
                    switch (x) {
                    case 'large':
                        return 46;
                    case 'medium':
                        return 36;
                    case 'small':
                        return 33;
                    case 'mini':
                        return 28;
                    }
                };
            }
        },
        methods: {
            handleSelect(item) {
                this.$emit('on-select', item);
            },
            onSelectDialog() {
                if (!this.disabled) {
                    this.$emit('on-click-icon');
                }
            },
            addBtn() {
                if (!this.disabled) {
                    this.$emit('on-add-icon');
                }
            }
        },
        watch: {
            val: {
                handler(newVal) {
                    this.valStr = newVal;
                },
                immediate: true
            },
            paramsData: {
                handler(newVal) {
                    this.newParamsData = newVal;
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>
<style scoped>
    .search-icon-bar {
        width: 30px;
        /*margin-left:-2px;*/
        text-align: center;
        border: solid 1px #DCDFE6;
        border-left: none;
        border-radius: 4px;
        cursor: pointer;
        flex-shrink: 0;
        box-sizing: border-box;
        color: #515a6e;
    }
    .search-icon-bar-hover:hover {
        background: #2d8cf0!important;
        color: #fff;
    }
</style>
